<template>
  <div class="article-detail" v-loading="loading">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:5px">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-home"></i>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ article.title }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" @click="$router.push('/article')">
      <h2>
        {{ article.title }}
        <el-tag v-for="label in article.labels" :key="label">{{ label.label }} </el-tag>
      </h2>
      <div class="article-msg">
        <div class="icon">
          <span class="icon-img">
            <img :src="article.user.icon_url" alt="">
          </span>
          <span class="icon-text"> {{ article.user.username }} </span>
        </div>
        <div class="date">
          <span class="date-icon"><i class="el-icon-date"></i></span>
          <span class="date-text">{{ article.createdAt }}</span>
        </div>
        <div class="comment-num">
          <span class="comment-icon"><i class="el-icon-s-comment"></i></span>
          <span class="comment-text">{{ commentTotal }}</span>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- <mavon-editor :boxShadow="false" previewBackground="#fff" :subfield='false' :toolbarsFlag="false" defaultOpen="preview" v-model="article.content"
            ref='mavon' /> -->

      <div class="content" v-html="article.content"></div>
      <el-divider></el-divider>
      <div style="cursor:pointer" v-if="betweenArticle.before.id" class="last-article"
        @click="$router.push('/article/' + betweenArticle.before.id)">
        上一篇：{{ betweenArticle.before.title }}
      </div>
      <div v-else>
        首篇
      </div>
      <div style="cursor:pointer" v-if="betweenArticle.after.id" class="next-article"
        @click="$router.push('/article/' + betweenArticle.after.id)">
        下一篇：{{ betweenArticle.after.title }}
      </div>
      <div v-else>
        末篇
      </div>
    </el-card>
    <el-card>
      <h3 class='aside-nav'> &nbsp;&nbsp; 相关文章</h3>
      <el-divider></el-divider>
      <ul class="share-link">
        <li> <a href="https://element.eleme.cn/#/zh-CN/component/icon">饿了么组件</a>
        </li>
        <li> <a href="https://cn.vuejs.org/">vue的中文文档</a>
        </li>
        <li> <a href="https://uniapp.dcloud.io/">uniapp开发文档</a>
        </li>
        <li> <a href="https://developers.weixin.qq.com/community/homepage">小程序开发者社区</a>
        </li>
        <li> <a href="https://vant-contrib.gitee.io/vant/">vant组件文档</a>
        </li>
        <li> <a href="https://www.tjcblog.com/">谭先生的个人博客</a>
        </li>
        <li> <a href="https://v3.bootcss.com/">bootstrap</a>
        </li>
        <li> <a href="https://www.nowcoder.com/">牛客网</a>
        </li>
        <li> <a href="https://www.csdn.net/ ">csdn官方网站</a>
        </li>
      </ul>
    </el-card>
    <el-card class="comment-wrap">
      <el-tabs v-model="activeName">
        <el-tab-pane label="发表评论" name="first">
          <el-form size="mini" :model="focontentrmComment" class="demo-form-inline">
            <el-form-item>
              <img :src="user.icon_url" alt="" style="width:30px;vertical-align: bottom;">
              {{ user.username }}
            </el-form-item>

            <el-form-item>
              <el-input type="textarea" v-model="formComment.content" style="width:100%"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button class="submit" type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="评论列表" name="first">
          <div class="infinite-list" infinite-scroll-distance="1" :infinite-scroll-disabled="loadingComment || noMore"
            v-infinite-scroll="load" style="overflow:auto;height: 400px;">
            <div class="commtent infinite-list-item" v-for="comment in comments" :key="comment">
              <div class="content">
                <img :src="comment.user.icon_url" alt="" style="height:100%">
                {{ comment.user.username }}
                <el-tag size="mini">访客</el-tag>
                &nbsp;
                <span class="comment-date">
                  <i class="el-icon-date"></i>
                  {{ comment.createdAt }}
                </span>
              </div>
              <div class="comment_content"> 内容：<span v-html='comment.content'></span> </div>
            </div>
          </div>
          <span style="text-align:center">
            <p v-if="loadingComment">加载中...</p>
            <p v-if="noMore">没有更多了</p>
          </span>
          <div v-if="comments.length === 0">
            暂时还没有评论噢
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'article-detail',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      noMore: false,
      formComment: {
        title: '',
        content: '',
        articleId: this.id,
        userId: ''
      },
      article: {
        user: {

        }
      },
      comments: [],
      commentTotal: 0,
      betweenArticle: {
        before: {},
        after: {}
      },
      activeName: 'first',
      loading: false,
      page: {
        pageSize: 10,
        pageNumber: 1
      },
      loadingComment: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getonearticle()
    })
    this.formComment.userId = this.user.id
  },
  computed: {
    ...mapGetters(['user', 'token'])
  },
  watch: {
    id: {
      handler () {
        this.getonearticle()
      }
    }
  },
  methods: {
    async load () {
      this.loadingComment = true
      const commentParams = {
        articleId: this.id,
        page: this.page
      }
      const result = await this.$http({
        url: '/comment/findComment',
        data: commentParams,
        method: 'post'
      })
      this.commentTotal = result.data.result.count
      if (!result.data.result.rows.length) {
        this.noMore = true
      } else {
        this.comments.push(...result.data.result.rows)
        this.page.pageNumber++
      }

      this.loadingComment = false
    },
    async getonearticle () {
      this.loading = true
      const res = await this.$http.get('/article/findArticleById?articleId=' + this.id)
      this.article = res.data.result.article[0]
      this.article.content = this.article.content.replace(/<img /g, '<img style="width:100%"')
      const index = res.data.result.articleAll.findIndex((v) => {
        return v.id === parseInt(this.id)
      })

      if (index > 0) {
        (this.betweenArticle.before = res.data.result.articleAll[index - 1])
      } else {
        this.betweenArticle.before = ''
      }
      if (index < (res.data.result.articleAll.length - 1)) {
        this.betweenArticle.after = res.data.result.articleAll[index + 1]
      } else {
        this.betweenArticle.after = ''
      }
      // const commentParams = {
      //   articleId: this.id,
      //   page: this.page
      // }
      // const result = await this.$http({
      //   url: '/comment/findComment',
      //   data: commentParams,
      //   method: 'post'
      // })
      // this.comments = result.data.data.rows
      this.loading = false
    },
    async onSubmit () {
      const res = await this.$http({
        url: '/comment/createComment',
        data: this.formComment,
        method: 'post'
      })
      if (res.data.code === 0) {
        this.$message.success('评论成功！')
        this.getonearticle()
        this.formComment.content = ''
      } else {
        this.$message.error('评论失败，请注意内容或昵称')
      }
    }
  }
}
</script>
<style lang="less" >
.article-detail {
  .quill-editor {
    height: 200px;
  }

  .v-note-wrapper {
    border: none
  }

  .commtent {
    border: 1px solid #bbbbbb;
    margin: 10px;
    padding: 5px;

    .content {
      img {
        vertical-align: bottom;
      }

      height: 30px;
      line-height: 30px;
    }

    .comment-date {
      font-size: 12px;
    }

    .comment_content {
      color: #966666;
    }
  }

  .last-article,
  .next-article {
    margin: 5px 0;
  }

  .last-article:hover {
    color: #999999;
  }

  .next-article:hover {
    color: #999999;
  }

  .el-divider {
    margin: 10px 0 !important;
  }

  .article-msg {
    font-size: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    bottom: 0;

    .icon {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-right: 10px;

      img {
        border-radius: 30px;
        width: 30px;
        height: 30px;
      }

      .icon-text {
        margin-left: 10px;
      }
    }

    .date {
      margin-left: 10px;
    }

    .read-num {
      margin-left: 15px;
    }

    .comment-num {
      margin-left: 10px;
    }
  }

  h2 {
    margin-bottom: 20px;
  }

  @media screen and(max-width: 890px) {
    .el-breadcrumb {
      display: none;

    }

    .el-card {
      border-radius: 20px;
    }
  }

  .aside-nav {
    height: 20px;
    line-height: 20px;
    text-align: left;
  }

  .aside-nav::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 22px;

    background-color: #409eff;
  }

  ul {
    li {
      height: 25px;
      line-height: 25px;
    }

    li a:hover {
      color: #409eff;
    }

    a::before {
      content: "";
      display: inline-block;
      height: 5px;
      width: 5px;
      background-color: #409eff;
      border-radius: 5px;
    }
  }

  .article-detail {
    line-height: 24px;

    .el-breadcrumb {
      margin: 10px 0;
    }

    .el-card {
      width: 100%;
      margin-bottom: 15px;
    }
  }
}
</style>
